﻿<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Web2 Blog</title>
	<link rel="stylesheet" type="text/css" href="style/main.css" />
	<link rel="stylesheet" type="text/css" href="style/colorbox.css" />
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript"></script>
	-->
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
		google.load("jquery", "1.7.1");
		google.load("jqueryui", "1.8.16");
	</script>
	<script src="js/eventHandler.js" type="text/javascript"></script>
	<script src="js/blogHandler.js" type="text/javascript"></script>
	<script src="js/jquery.colorbox.js" type="text/javascript"></script>
	<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
	<script src="js/main.js" type="text/javascript"></script>
	<script src="js/google.js" type="text/javascript"></script>
	<script src="js/calendar.js" type="text/javascript"></script>
</head>
<body>

<div id="wrapper_outer">

	<div id="wrapper">
		
		<p id="back-top">
			<a href="#wrapper"><span></span></a>
		</p>
    
    	<div id="header">
            <div id="site_title">
                <h1>Web2 Blog<span>CS4380 Project</span></h1>
            </div> <!-- end of site_title -->
            
            <div id="menu">
                <ul>
                    <li><a href="index.html" id="home" class="current">Home</a></li>
                    <li><a href="#create_popup" id="create">Create</a></li>
                    <li><a href="api.html" id="api" target="_blank">APIs</a></li>
                </ul>
                <div id="googleplus" style="float:right; margin-left:20px;">
                	<g:plusone annotation="inline" width="120"></g:plusone>
                </div>
            </div> <!-- end of menu -->
            
		</div>   <!-- end of header -->
    
    
        <div id="main_wrapper">
            <div id="main">
	            	
                <div id="blog_content">
                	<div id="loading"><img src="images/loading.gif" /></div>
					
                	<div id="content"></div>
                </div> <!-- end of blog_content -->
                
                <div id="sidebar">
                	
                	<div class="sidebar_box">
                		<h3>Select Blog</h3>
                		<select id="blog_users">
                		</select>
                 	</div>
                	<div class="sidebar_box">
                		<h3>Blog Calendar</h3>
                		<p>Select date to view blogs</p>
                		<p></p>
                		<div id="calendar_div">
                		</div>
                	</div>
					
                <!--
					<div class="sidebar_box">
						<h3>Blog List</h3>
						<ul id="bloglist_div" class="tmo_list">
						</ul>
					</div>
                
               	
                	<div class="sidebar_box">
                		<h3>About Me</h3>
                		
                		<p>Name: Tina XIE</p>
                		<p>EID: 51158405</p>
                		<p>Major: Computer Science</p>
                	</div>
                -->
                </div> <!-- end of sidebar -->
                
                <div class="cleaner"></div>
	                    	
           </div> <!-- end of main -->
        	       	
        </div> <!-- end of main wrapper -->
    </div> <!-- end of wrapper -->
    
    <div id="footer">
    	
			<p>Copyright &copy; XIE Ting</p>
			<p id="credit">
			<a href="http://www.iwebsitetemplate.com/">Website Template</a> By <a href="http://www.templatemo.com/">Templatemo.com</a>
			</p>              
        
        <div class="cleaner"></div>
    </div>
         
</div>

<!-- use color box JQuery plugin to show the create form -->
<div id="create_wrapper" class="popup_wrapper">
	
	<div id="create_popup" class="window">
		<form id="create_form" class="form" action="">
			<h3>Create a Post</h3>
			<div class="yui3-skin-sam">
			<label for="create_user">Author:</label>
			<input type="text" id="create_user" name="create_user" class="input_field" />
			</div>
			<label for="create_pw">Password:</label>
			<input type="password" id="create_pw" name="create_pw" class="input_field" />
			<label for="create_title">Title:</label>
			<input type="text" id="create_title" name="create_title" class="input_field" />
			<label for="create_content">Content:</label>
			<textarea col="15" rows="30" id="create_content" name="create_content"></textarea>
			<input type="button" id="create_submit" class="submit_btn" value="Submit" />
			<input type="button" id="create_cancel" class="submit_btn" value="Cancel" />
			<img id="create_loading" src="images/loading.gif" style="display:none;" />
			<span id="create_error" class="error_msg"></span>
		</form>
	</div>
	
</div> <!-- end of create_form -->

<!-- use colorbox jQuery plugin to show the form -->
<div id="edit_wrapper" class="popup_wrapper">
	
	<div id="edit_popup" class="window">
    	<form id="edit_form" class="form" action="">
    		<input type="hidden" id="edit_id" />
    		<label for="edit_user">Author:</label>
    		<input type="text" id="edit_user" name="edit_user" class="input_field" readonly="readonly" />
    		<label for="edit_pw">Password:</label>
    		<input type="password" id="edit_pw" name="edit_pw" class="input_field" />
			<label for="edit_title">Title:</label>
			<input type="text" id="edit_title" name="edit_title" class="input_field" />
			<label for="edit_content">Content:</label>
			<textarea col="15" rows="30" id="edit_content" name="edit_content"></textarea>
			<input type="submit" id="edit_submit" class="submit_btn" />
			<input type="button" id="edit_cancel" value="Cancel" class="submit_btn" />
 			<img id="edit_loading" src="images/loading.gif" style="display:none;" />
  			<span id="edit_error" class="error_msg"></span>
		</form>
	</div>
	
</div> <!-- end of edit_wrapper -->

<div id="delete_wrapper" class="popup_wrapper">
	
	<div id="delete_popup" class="window">
		<form id="delete_form" class="form" action="">
			<input type="hidden" id="delete_id" />
			<label for="delete_user">Author:</label>
			<input type="text" id="delete_user" name="delete_user" class="input_field" readonly="readonly" />
			<label for="delete_pw">Enter Password:</label>
			<input type="password" id="delete_pw" name="delete_pw" class="input_field" />
			<br />
			<input type="button" id="delete_submit" class="submit_btn" value="Confirm Delete" />
			<input type="button" id="delete_cancel" class="submit_btn" value="Cancel" />
			<img id="delete_loading" src="images/loading.gif" style="display:none;" />
			<span id="delete_error" class="error_msg"></span>
		</form>
	</div>
	
</div>
</body>
</html>